<template>
  <div id="jiage">
    <div class="nav">
      <div style="margin-left: 20px">
        <ul class="navul">
          <li @click="home"><van-icon name="wap-home" color="#FF4400" />闲呗首页</li>
          <li>Hi,<a>{{profile[0].userName}}</a></li>
          <li @click="exit">退出</li>
        </ul>
      </div>
      <div style="float: right">
        <ul class="navultow">
          <li class="mycb1" @click="gomycenter">
            <a class="myxb">我的闲呗</a>
            <div class="hen"></div>
            <ul class="second">
              <li><a class="second1">我已买到的宝贝</a></li>
              <li class="second1">我已卖出的宝贝</li>
            </ul>
          </li>
          <li @click="activity">
            <van-icon name="shopping-cart-o" color="#FF4400" />活动页
            <div class="hen"></div>
          </li>
          <li>
            <van-icon name="star" color="#FF4400" />收藏夹
            <div class="hen"></div>
          </li>
          <li>
            手机版
            <div class="hen"></div>
          </li>
          <li @click="gocustomerchat()">
            联系客服
            <div class="hen"></div>
          </li>
          <li @click="mycenter">个人中心</li>
        </ul>
      </div>
    </div>
    <div class="back">
      <!-- <img class="backimg" src="http://112.74.185.144:8000/files/Zqm1666747516.jpg" alt=""> -->
    </div>
    <!--商家发布信息-->
    <div class="fabu">
      <div>
        <input
          v-model="basic"
          type="text"
          id="message"
          placeholder="卖家都关品牌型号、入手渠道、转手原因..."
        />
      </div>
      <div>
        <van-uploader :after-read="afterRead" v-model="fileList" :deletable="false"/>
      </div>
      <div class="adds">
        <van-icon name="location-o" /><span @click="showPopup"
          >请选择发货地址></span
        >
      </div>
      <!--商品规格-->
      <div class="spec">
        <div style="display: flex">
          <span>分类</span>
          <ul
            class="specul"
            v-for="(item, index) in sort"
            :key="index"
            @click="handlefl(item, index)"
          >
            <li class="specli">
              <div :class="index == active ? 'textRed' : ''">
                {{ item.categoryNane }}
              </div> 
            </li>
          </ul>
        </div>
        <div class="paimaileix">
          请选择拍卖类型
          <div @click="handlezc">正常卖</div>
          <div @click="handlepm">拍卖</div>
        </div>
        <div style="margin-top: 30px">
          <!-- <div class="brand">
                        品牌/品类:<input type="text" placeholder="请输入该商品的品牌或品种">
                    </div> -->
          <div class="brand">
            型号/名称:<input
              v-model="mc"
              type="text"
              placeholder="请输入该商品的型号,名称"
            />
          </div>
          <!-- <div class="brand">
                        使用时长:<input type="text" placeholder="请输入该商品的使用时长,年龄">
                    </div> -->
          <!-- <div class="brand">
                        规格:<input type="text" placeholder="请输入该商品规格，手机内存，衣服大小">
                    </div> -->
          <!-- <div class="brand">
                        成色:<input type="text" placeholder="请输入该商品几成新">
                    </div> -->
        </div>
      </div>
      <div>
        <van-popup v-model="show">
          <van-address-edit
            :area-list="areaList"
            show-set-default
            show-search-result
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
          />
        </van-popup>
      </div>
      <div class="price" @click="showxs">
        <div style="font-size: 17px"><van-icon name="gold-coin" />价格</div>

        <div class="jiner">
          <span style="color: red; font-size: 17px"></span>>
        </div>
      </div>
      <!---->
      <div id="zcpm" v-show="zcpm">
        <div style="display: flex">
          <van-field
            v-model="cost"
            type="number"
            label="原价"
            placeholder="￥0.00"
          />
        </div>
        <div class="line"></div>
        <div>
          <van-field
            v-model="number"
            type="number"
            label="折后价格"
            placeholder="￥0.00"
          />
        </div>
        <div class="line"></div>
        <div style="display: flex">
          <van-field
            v-model="digit"
            type="digit"
            label="运费"
            placeholder="￥0.00"
          />
          <div>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">包邮</van-radio>
              <van-radio name="2">自提</van-radio>
              <van-radio name="3">按距离计算</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <!--发起拍卖-->
      <div v-show="pm" style="margin-top: 26px">
        <van-field
          v-model="starting"
          type="digit"
          label="起拍价"
          placeholder="￥0"
        />
        <van-field
          v-model="pledge"
          type="digit"
          label="保证金"
          placeholder="￥0"
        />
        <van-field
          v-model="raise"
          type="digit"
          label="加价幅度"
          placeholder="￥0"
        />
        <div style="display: flex; justify-content: space-around">
          <div @click="kssj1">开始时间</div>
          <div @click="jssj1">结束时间</div>
        </div>
        <div v-show="kssj">
          <van-datetime-picker
            v-model="starttime"
            type="datetime"
            title="开始时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="confirm"
          />
        </div>
        <div v-show="jssj">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="结束时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="conend"
          />
        </div>
      </div>
      <div style="width: 1200px; text-align: -webkit-right; margin-top: 50px">
        <div class="issue" @click="handleissue">发布</div>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      starttime:new Date(),
      show: false,
      profile:[{userName:""}],
      //第一个输入框
      basic: "",
      time: "",
      endtime: "",
      kssj: false,
      jssj: false,
      areaList,
      show1: false,
      show2: false,
      zcpm: false,
      pm: false,
      number: "",
      digit: "",
      starting: "",
      pledge: "",
      cost: "",
      elect: '',
      raise: "",
      sj: false,
      date: "",
      radio: "",
      mc: "",
      //存点击类别的变量
      category: "",
      //类别表
      sort: [],
      sortid: "",
      user: window.sessionStorage.getItem("userTel"),
      addslist: [],
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      imgList: [],

      active: -1,
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);

      let formData = new FormData();
      formData.append("file", file.file);
      console.log(file.file);
      this.$axios({
        url: "http://112.74.185.144:8000/api/common/uploadfile",
        method: "POST",
        data: formData,
        // headers: {' Content-Type' :'multipart/form-data'}
      })
        .then((resp) => {
          console.log(resp.data);
          // this.loginer.photo = resp.data.data
          this.imgList.push(resp.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gocustomerchat(){  //去客服聊天
            if (sessionStorage.getItem('userTel')) {
                this.$router.push({name: 'CustomerChat'})
            }
         },
    kssj1() {
      this.kssj = true;
      this.jssj = false;
    },
    home(){//跳转首页
      this.$router.push('/')
    },
    exit(){//退出登录
      sessionStorage.removeItem('userTel')
      this.$router.push('/')
    },
    activity(){//跳转活动页面
      this.$router.push('ActivityPage')
    },
    mycenter(){
      this.$router.push("MyCenter")
    },
    jssj1() {
      this.kssj = false;
      this.jssj = true;
    },
    showPopup() {
      this.show = true;
    },
    showxs() {
      this.show1 = true;
    },
    changeshow() {
      this.show2 = true;
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.sj = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    handlefl(item, index) {
      this.active = index;
      this.category = item;
      // console.log(item)
      // console.log(this.active)
      this.sortid = this.category.categoryId;
      console.log(this.category, 223);
    },
    handlezc() {
      this.zcpm = true;
      this.pm = false;
      this.elect = 1;
      console.log(this.elect);
    },
    handlepm() {
      this.pm = true;
      this.zcpm = false;
      this.elect = 2;
      console.log(this.elect, 99);
    },
    confirm(value) {
      console.log(value);
      var nowTime =value; // Date Thu Dec 02 2021 16:10:53 GMT+0800 (中国标准时间)
      this.time =
        nowTime.getFullYear() +
        "-" +
        (nowTime.getMonth() + 1) +
        "-" +
        nowTime.getDate() +
        " " +
        nowTime.getHours() +
        ":" +
        nowTime.getMinutes() +
        ":" +
        nowTime.getSeconds();
      console.log(this.time); // 2021-12-2 16:10:53
      this.kssj = false;
    },
    conend(value) {
      console.log(value);
      var nowTime = value; // Date Thu Dec 02 2021 16:10:53 GMT+0800 (中国标准时间)
      this.endtime =
        nowTime.getFullYear() +
        "-" +
        (nowTime.getMonth() + 1) +
        "-" +
        nowTime.getDate() +
        " " +
        nowTime.getHours() +
        ":" +
        nowTime.getMinutes() +
        ":" +
        nowTime.getSeconds();
      console.log(this.endtime); // 2021-12-2 16:10:53
      this.jssj = false;
    },
    //发布方法
    handleissue() {
      if (
        (this.cost == "" || this.number == "") &&
        (this.starting == "" || this.pledge == "" || this.raise == "")
      ) { 
        Toast("[描述]&[图片]&[价格]都不能为空哦");
      } else {
        console.log(2232342412);
        console.log(this.imgList, 277);
        this.$axios
          .post(
            "api/commodityTable/sendissue",
            this.$qs.stringify({
              commodityName: this.mc,
              originalPrice: this.cost,
              currentPrice: this.number,
              commodityImg: this.imgList[0],
              describe: this.basic,
              userTel: this.user,
              imgList2: JSON.stringify(this.imgList),
              address: this.addslist,
              sortid: this.sortid,
              isno: this.elect,
              starting: this.starting,
              auctionstate: 0 + "",
              addPrice: this.raise,
              nowPrice: this.starting,
              startTime: this.time,
              endTime: this.endtime,
              bail: this.pledge,
              // userTel: this.user,
            })
          )
          .then((resp) => {
            console.log(resp.data);
            console.log(this.describe);
            this.imgList = [];
            this.mc='';
            this.cost='';
            this.number='';
            this.basic='';
            this.sortid='';
            // this.elect='';
            this.starting='';
            this.pledge='';
            this.active=-1;
            this.fileList=[],
            Toast("发布成功");
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    gomycenter(){
            if(sessionStorage.getItem('userTel')==null){
                this.$router.push({
                    name:'Login'
                })
            }else{
                this.$router.push({
                    name:'MyCenter'
                })
            }
         },
    onSave(a) {
      //发布地址
      console.log(a, 281);
      this.addslist = a.province + a.city + a.county;
      console.log(this.addslist, 1111111);
      this.show = false;
    },
  },
  mounted() {
    this.$axios({
      url: "/api/categoryTable/getsort",
      methods: "get",
      dataType: "JSON",
      params: {
        start: 0,
        size: 1000,
      },
    })
      .then((data) => {
        console.log(data.data.data);

        this.sort = data.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
      this.$axios({
        url:'api/myprofile/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.user
          }
      }).then(data=>{
          this.profile=data.data.data
          console.log(this.profile,882);
      }).catch(err=>{
          console.log(err)
      })
  },
};
</script>



<style scoped>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  font-size: 12px;
}

.nav {
  width: 1290px;
  z-index: 10000;
  height: 35px;
  margin: 0 auto;
  /* border: 1px solid red; */
  background-color: #f5f5f5;
  box-shadow: 0px 0px 2px #2999;
  color: #756c6c;
  font-size: 10px;
  cursor: pointer;
}

.navul li:hover {
  color: #ff4400;
}

.navul li {
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
  /* text-align: center; */
}

.navultow li {
  position: relative;
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
}

.hen {
  width: 1px;
  height: 10px;
  background-color: rgb(0, 0, 0, 0.2);
  position: absolute;
  top: 11px;
  right: 24px;
  transform: rotate(20deg);
}

.second {
  width: 100px;
  height: 70px;
  box-shadow: 0px 0px 2px #2999;
  display: none;
}

.mycb1:hover .second {
  /* color:#FF4400; */
  display: block;
}

.myxb:hover {
  text-decoration: underline;
  color: #ff4400;
}

.second1:hover {
  color: #ff4400;
  text-decoration: underline;
}

#message {
  width: 600px;
  height: 100px;
  border: 0px;
}

.adds {
  width: 110px;
  background-color: darkgray;
  border-radius: 10px;
  
}

.price {
  /* width: 1200px; */
  line-height: 100px;
  height: 75px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.jiner {
  font-size: 16px;
}

#jiage ::v-deep .van-cell {
  width: 79%;

}

.line {
  width: 100%;
  height: 1px;
  background-color: darkgrey;
}

.issue {
  width: 100px;
  height: 50px;
  border-radius: 30px;
  background-color: gold;
  text-align: center;
  line-height: 50px;
  font-size: 17px;
  color: white;
  cursor: pointer;
}

.back {
  width: 100%;
  height: 100px;
  background-repeat: no-repeat;
  /* background-image: url(http://112.74.185.144:8000/files/Zqm1666747516.jpg); */
  /* background-color: #F6ED6C; */
}

.spec {
  margin-top: 10px;
  width: 1261px;
  height: 20px;
  /* border: 1px solid red; */
}

.specul {
  margin-left: 8px;
}

.specul li {
  width: 80px;
  float: left;
  cursor: pointer;
}

.specli div {
  width: 60px;
  background-color: #dddddd;
  text-align: center;
  border-radius: 10px;
}

.brand {
  width: 1200px;
}

.brand input {
  width: 500px;
  height: 50px;
  border: 0px;
  margin-left: 10px;
}

.paimaileix {
  width: 260px;
  /* height: 50px; */
  /* line-height: 50px; */
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
}

.paimaileix div {
  width: 50px;
  background-color: #dddddd;
  border-radius: 10px;
  text-align: center;
}

#zcpm {
  margin-top: 26px;
}

.textRed {
  background-color: #ffcc66 !important;
  color: white;
  border: 1px solid #ffcc66;
}
.backimg{
  width: 200px;
}
.fabu{
  width: 1250px;
  margin: 0 auto;
  background-color:white;
  border-radius: 10px;
  overflow: hidden;
}
#jiage{
  width: 100%;
height: 100vh;
  background: linear-gradient(to right, rgb(224, 234, 252), rgb(207, 222, 243));
}
</style>